<script setup lang="ts">
import { Eye, Trash2 } from '@vben/icons'
import { computed } from 'vue'

defineOptions({ name: 'ImagePreviewActions' })

interface Props {
  imageUrl: string
  showActions?: boolean
  borderRadius?: string
}

const props = withDefaults(defineProps<Props>(), {
  showActions: true,
  borderRadius: ''
})

const emit = defineEmits<{
  preview: []
  delete: []
}>()

const handlePreview = () => {
  emit('preview')
}

const handleDelete = () => {
  emit('delete')
}

const actionStyle = computed(() => {
  return props.borderRadius ? { borderRadius: props.borderRadius } : {}
})
</script>

<template>
  <div v-if="showActions" class="absolute bottom-0 left-0 right-0 bg-black flex h-[22px] opacity-0 group-hover:opacity-100 transition-opacity duration-300" :style="actionStyle">
    <div @click="handlePreview" class="flex-1 h-full flex items-center justify-center cursor-pointer transition-colors hover:bg-white hover:bg-opacity-40">
      <Eye class="text-white w-[13px]" />
    </div>
    <div class="w-px h-[22px] bg-white"></div>
    <div @click="handleDelete" class="flex-1 h-full flex items-center justify-center cursor-pointer transition-colors hover:bg-white hover:bg-opacity-40">
      <Trash2 class="text-white w-[13px]" />
    </div>
  </div>
</template> 
